<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='global-property-use strict'>/**
</span> * @fileOverview 选择控件
 * @author dxq613@gmail.com
 * @ignore
 */

&#39;use strict&#39;;
var $ = require(&#39;jquery&#39;),
  BUI = require(&#39;bui-common&#39;),
  ListPicker = require(&#39;bui-picker&#39;).ListPicker,
  PREFIX = BUI.prefix;

function formatItems(items){
 
  if($.isPlainObject(items)){
    var tmp = [];
    BUI.each(items,function(v,n){
      tmp.push({value : n,text : v});
    });
    return tmp;
  }
  var rst = [];
  BUI.each(items,function(item,index){
    if(BUI.isString(item)){
      rst.push({value : item,text:item});
    }else{
      rst.push(item);
    }
  });
  return rst;
}

var Component = BUI.Component,
  Picker = ListPicker,
  CLS_INPUT = PREFIX + &#39;select-input&#39;,
<span id='BUI-Select-Select'>  /**
</span>   * 选择控件
   * xclass:&#39;select&#39;
   * &lt;pre&gt;&lt;code&gt;
   *  BUI.use(&#39;bui/select&#39;,function(Select){
   * 
   *   var items = [
   *         {text:&#39;选项1&#39;,value:&#39;a&#39;},
   *         {text:&#39;选项2&#39;,value:&#39;b&#39;},
   *         {text:&#39;选项3&#39;,value:&#39;c&#39;}
   *       ],
   *       select = new Select.Select({  
   *         render:&#39;#s1&#39;,
   *         valueField:&#39;#hide&#39;,
   *         //multipleSelect: true, //是否多选
   *         items:items
   *       });
   *   select.render();
   *   select.on(&#39;change&#39;, function(ev){
   *     //ev.text,ev.value,ev.item
   *   });
   *   
   * });
   * &lt;/code&gt;&lt;/pre&gt;
   * @class BUI.Select.Select
   * @extends BUI.Component.Controller
   */
  select = Component.Controller.extend({
    //初始化
    initializer:function(){
      var _self = this,
        multipleSelect = _self.get(&#39;multipleSelect&#39;),
        xclass,
        picker = _self.get(&#39;picker&#39;),
        list;
      if(!picker){
        xclass = multipleSelect ? &#39;listbox&#39; : &#39;simple-list&#39;;
        list = _self.get(&#39;list&#39;) || {};
        list = BUI.mix(list,{
          xclass : xclass,
          elCls:PREFIX + &#39;select-list&#39;,
          store : _self.get(&#39;store&#39;),
          items : formatItems(_self.get(&#39;items&#39;))/**/
        });

        picker = new Picker({
          children:[
            list
          ],
          valueField : _self.get(&#39;valueField&#39;)
        });
        
        _self.set(&#39;picker&#39;,picker);
      }else{
        if(_self.get(&#39;valueField&#39;)){
          picker.set(&#39;valueField&#39;,_self.get(&#39;valueField&#39;));
        }
      }
      if(multipleSelect){
        picker.set(&#39;hideEvent&#39;,&#39;&#39;);
      }
      
    },
    //渲染DOM以及选择器
    renderUI : function(){
      var _self = this,
        picker = _self.get(&#39;picker&#39;),
        textEl = _self._getTextEl();
      picker.set(&#39;trigger&#39;,_self.getTrigger());
      picker.set(&#39;triggerEvent&#39;, _self.get(&#39;triggerEvent&#39;));
      picker.set(&#39;autoSetValue&#39;, _self.get(&#39;autoSetValue&#39;));
      picker.set(&#39;textField&#39;,textEl);
      picker.render();
      _self.set(&#39;list&#39;,picker.get(&#39;list&#39;));
    },
    //绑定事件
    bindUI : function(){
      var _self = this,
        picker = _self.get(&#39;picker&#39;),
        list = picker.get(&#39;list&#39;),
        store = list.get(&#39;store&#39;);
        
      //选项发生改变时
      picker.on(&#39;selectedchange&#39;,function(ev){
        if(ev.item){
          _self.fire(&#39;change&#39;,{text : ev.text,value : ev.value,item : ev.item});
        }
      });
      if(_self.get(&#39;autoSetValue&#39;)){
        list.on(&#39;itemsshow&#39;,function(){
          _self._syncValue();
        });
      }
      
      picker.on(&#39;show&#39;,function(){
        if(_self.get(&#39;forceFit&#39;)){
          picker.set(&#39;width&#39;,_self.get(&#39;el&#39;).outerWidth());
        }
      });
    },
<span id='BUI-Select-Select-method-containsElement'>    /**
</span>     * 是否包含元素
     * @override
     */
    containsElement : function(elem){
      var _self = this,
        picker = _self.get(&#39;picker&#39;);

      return Component.Controller.prototype.containsElement.call(this,elem) || picker.containsElement(elem);
    },
<span id='BUI-Select-Select-method-getTrigger'>    /**
</span>     * @protected
     * 获取触发点
     */
    getTrigger : function(){
      return this.get(&#39;el&#39;);
    },
    //设置子项
    _uiSetItems : function(items){
      if(!items){
        return;
      }
      var _self = this,
        picker = _self.get(&#39;picker&#39;),
        list = picker.get(&#39;list&#39;);
      list.set(&#39;items&#39;,formatItems(items));
      _self._syncValue();
    },
    _syncValue : function(){
      var _self = this,
        picker = _self.get(&#39;picker&#39;),
        valueField = _self.get(&#39;valueField&#39;);
      if(valueField){
        picker.setSelectedValue($(valueField).val());
      }
    },
    //设置Form表单中的名称
    _uiSetName:function(v){
      var _self = this,
        textEl = _self._getTextEl();
      if(v){
        textEl.attr(&#39;name&#39;,v);
      }
    },
    _uiSetWidth : function(v){
      var _self = this;
      if(v != null){
        if(_self.get(&#39;inputForceFit&#39;)){
          var textEl = _self._getTextEl(),
          iconEl = _self.get(&#39;el&#39;).find(&#39;.x-icon&#39;),
          appendWidth = textEl.outerWidth() - textEl.width(),
          
          width = v - iconEl.outerWidth() - appendWidth;
          textEl.width(width);
        }
        
        if(_self.get(&#39;forceFit&#39;)){
          var picker = _self.get(&#39;picker&#39;);
          picker.set(&#39;width&#39;,v);
        }
        
      }
    },
    //禁用
    _uiSetDisabled : function(v){
      var _self = this,
        picker = _self.get(&#39;picker&#39;),
        textEl = _self._getTextEl();
      picker.set(&#39;disabled&#39;,v);
      textEl &amp;&amp; textEl.attr(&#39;disabled&#39;,v);
    },
    _getTextEl : function(){
       var _self = this,
        el = _self.get(&#39;el&#39;);
      return el.is(&#39;input&#39;) ? el : el.find(&#39;input&#39;);
    },
<span id='BUI-Select-Select-method-destructor'>    /**
</span>     * 析构函数
     */
    destructor:function(){
      var _self = this,
        picker = _self.get(&#39;picker&#39;);
      if(picker){
        picker.destroy();
      }
    },
    //获取List控件
    _getList:function(){
      var _self = this,
        picker = _self.get(&#39;picker&#39;),
        list = picker.get(&#39;list&#39;);
      return list;
    },
<span id='BUI-Select-Select-method-getSelectedValue'>    /**
</span>     * 获取选中项的值，如果是多选则，返回的&#39;1,2,3&#39;形式的字符串
     * &lt;pre&gt;&lt;code&gt;
     *  var value = select.getSelectedValue();
     * &lt;/code&gt;&lt;/pre&gt;
     * @return {String} 选中项的值
     */
    getSelectedValue:function(){
      return this.get(&#39;picker&#39;).getSelectedValue();
    },
<span id='BUI-Select-Select-method-setSelectedValue'>    /**
</span>     * 设置选中的值
     * &lt;pre&gt;&lt;code&gt;
     * select.setSelectedValue(&#39;1&#39;); //单选模式下
     * select.setSelectedValue(&#39;1,2,3&#39;); //多选模式下
     * &lt;/code&gt;&lt;/pre&gt;
     * @param {String} value 选中的值
     */
    setSelectedValue : function(value){
      var _self = this,
        picker = _self.get(&#39;picker&#39;);
      picker.setSelectedValue(value);
    },
<span id='BUI-Select-Select-method-getSelectedText'>    /**
</span>     * 获取选中项的文本，如果是多选则，返回的&#39;text1,text2,text3&#39;形式的字符串
     * &lt;pre&gt;&lt;code&gt;
     *  var value = select.getSelectedText();
     * &lt;/code&gt;&lt;/pre&gt;
     * @return {String} 选中项的文本
     */
    getSelectedText:function(){
      return this.get(&#39;picker&#39;).getSelectedText();
    }
  },{
    ATTRS : 
    {

<span id='BUI-Select-Select-cfg-picker'>      /**
</span>       * 选择器，浮动出现，供用户选择
       * @cfg {BUI.Picker.ListPicker} picker
       * &lt;pre&gt;&lt;code&gt;
       * var columns = [
       *       {title : &#39;表头1(30%)&#39;,dataIndex :&#39;a&#39;, width:&#39;30%&#39;},
       *       {id: &#39;123&#39;,title : &#39;表头2(30%)&#39;,dataIndex :&#39;b&#39;, width:&#39;30%&#39;},
       *       {title : &#39;表头3(40%)&#39;,dataIndex : &#39;c&#39;,width:&#39;40%&#39;}
       *     ],   
       *   data = [{a:&#39;123&#39;,b:&#39;选择文本1&#39;},{a:&#39;cdd&#39;,b:&#39;选择文本2&#39;},{a:&#39;1333&#39;,b:&#39;选择文本3&#39;,c:&#39;eee&#39;,d:2}],
       *   grid = new Grid.SimpleGrid({
       *     idField : &#39;a&#39;, //设置作为key 的字段，放到valueField中
       *     columns : columns,
       *     textGetter: function(item){ //返回选中的文本
       *       return item.b;
       *     }
       *   }),
       *   picker = new Picker.ListPicker({
       *     width:300,  //指定宽度
       *     children : [grid] //配置picker内的列表
       *   }),
       *   select = new Select.Select({  
       *     render:&#39;#s1&#39;,
       *     picker : picker,
       *     forceFit:false, //不强迫列表跟选择器宽度一致
       *     valueField:&#39;#hide&#39;,
       *     items : data
       *   });
       * select.render();
       * &lt;/code&gt;&lt;/pre&gt;
       */
<span id='BUI-Select-Select-property-picker'>      /**
</span>       * 选择器，浮动出现，供用户选择
       * @readOnly
       * @type {BUI.Picker.ListPicker}
       */
      picker:{

      },
<span id='BUI-Select-Select-property-list'>      /**
</span>       * Picker中的列表
       * &lt;pre&gt;
       *   var list = select.get(&#39;list&#39;);
       * &lt;/pre&gt;
       * @readOnly
       * @type {BUI.List.SimpleList}
       */
      list : {

      },
<span id='BUI-Select-Select-cfg-valueField'>      /**
</span>       * 存放值得字段，一般是一个input[type=&#39;hidden&#39;] ,用于存放选择框的值
       * @cfg {Object} valueField
       */
<span id='global-property-valueField'>      /**
</span>       * @ignore
       */
      valueField : {

      },
<span id='BUI-Select-Select-cfg-Store'>      /**
</span>       * 数据缓冲类
       * &lt;pre&gt;&lt;code&gt;
       *  var store = new Store({
       *    url : &#39;data.json&#39;,
       *    autoLoad : true
       *  });
       *  var select = new Select({
       *    render : &#39;#s&#39;,
       *    store : store//设置了store后，不要再设置items，会进行覆盖
       *  });
       *  select.render();
       * &lt;/code&gt;&lt;/pre&gt;
       * @cfg {BUI.Data.Store} Store
       */
      store : {

      },
      focusable:{
        value:true
      },
<span id='BUI-Select-Select-property-autoSetValue'>      /**
</span>       * 是否跟valueField自动同步
       * @type {Boolean}
       */
      autoSetValue : {
        value : true
      },
<span id='BUI-Select-Select-cfg-multipleSelect'>      /**
</span>       * 是否可以多选
       * @cfg {Boolean} [multipleSelect=false]
       */
<span id='BUI-Select-Select-property-multipleSelect'>      /**
</span>       * 是否可以多选
       * @type {Boolean}
       */
      multipleSelect:{
        value:false
      },
<span id='BUI-Select-Select-property-inputForceFit'>      /**
</span>       * 内部的input是否跟随宽度的变化而变化
       * @type {Object}
       */
      inputForceFit : {
        value : true
      },  
<span id='BUI-Select-Select-cfg-name'>      /**
</span>       * 控件的name，用于存放选中的文本，便于表单提交
       * @cfg {Object} name
       */
<span id='BUI-Select-Select-property-name'>      /**
</span>       * 控件的name，便于表单提交
       * @type {Object}
       */
      name:{

      },
<span id='BUI-Select-Select-cfg-items'>      /**
</span>       * 选项
       * @cfg {Array} items
       * &lt;pre&gt;&lt;code&gt;
       *  BUI.use(&#39;bui/select&#39;,function(Select){
       * 
       *   var items = [
       *         {text:&#39;选项1&#39;,value:&#39;a&#39;},
       *         {text:&#39;选项2&#39;,value:&#39;b&#39;},
       *         {text:&#39;选项3&#39;,value:&#39;c&#39;}
       *       ],
       *       select = new Select.Select({  
       *         render:&#39;#s1&#39;,
       *         valueField:&#39;#hide&#39;,
       *         //multipleSelect: true, //是否多选
       *         items:items
       *       });
       *   select.render();
       *   
       * });
       * &lt;/code&gt;&lt;/pre&gt;
       */
<span id='BUI-Select-Select-property-items'>      /**
</span>       * 选项
       * @type {Array}
       */
      items:{
        sync:false
      },
<span id='BUI-Select-Select-property-inputCls'>      /**
</span>       * 标示选择完成后，显示文本的DOM节点的样式
       * @type {String}
       * @protected
       * @default &#39;bui-select-input&#39;
       */
      inputCls:{
        value:CLS_INPUT
      },
<span id='BUI-Select-Select-cfg-forceFit'>      /**
</span>       * 是否使选择列表跟选择框同等宽度
       * &lt;pre&gt;&lt;code&gt;
       *   picker = new Picker.ListPicker({
       *     width:300,  //指定宽度
       *     children : [grid] //配置picker内的列表
       *   }),
       *   select = new Select.Select({  
       *     render:&#39;#s1&#39;,
       *     picker : picker,
       *     forceFit:false, //不强迫列表跟选择器宽度一致
       *     valueField:&#39;#hide&#39;,
       *     items : data
       *   });
       * select.render();
       * &lt;/code&gt;&lt;/pre&gt;
       * @cfg {Boolean} [forceFit=true]
       */
      forceFit : {
        value : true
      },
      events : {
        value : {
<span id='BUI-Select-Select-event-change'>          /**
</span>           * 选择值发生改变时
           * @event
           * @param {Object} e 事件对象
           * @param {String} e.text 选中的文本
           * @param {String} e.value 选中的value
           * @param {Object} e.item 发生改变的选项
           */
          &#39;change&#39; : false
        }
      },
<span id='BUI-Select-Select-property-tpl'>      /**
</span>       * 控件的默认模版
       * @type {String}
       * @default 
       * &#39;&amp;lt;input type=&quot;text&quot; readonly=&quot;readonly&quot; class=&quot;bui-select-input&quot;/&amp;gt;&amp;lt;span class=&quot;x-icon x-icon-normal&quot;&amp;gt;&amp;lt;span class=&quot;bui-caret bui-caret-down&quot;&amp;gt;&amp;lt;/span&amp;gt;&amp;lt;/span&amp;gt;&#39;
       */
      tpl : {
        view:true,
        value : &#39;&lt;input type=&quot;text&quot; readonly=&quot;readonly&quot; class=&quot;&#39;+CLS_INPUT+&#39;&quot;/&gt;&lt;span class=&quot;x-icon x-icon-normal&quot;&gt;&lt;i class=&quot;icon icon-caret icon-caret-down&quot;&gt;&lt;/i&gt;&lt;/span&gt;&#39;
      },
<span id='BUI-Select-Select-cfg-triggerEvent'>      /**
</span>       * 触发的事件
       * @cfg {String} triggerEvent
       * @default &#39;click&#39;
       */
      triggerEvent:{
        value:&#39;click&#39;
      }  
    }
  },{
    xclass : &#39;select&#39;
  });

module.exports = select;
</pre>
</body>
</html>
